import { bindShapeAction } from './regiserEdge';


(() => {
  bindShapeAction(G6);
  const h = document.querySelector('#root').scrollHeight;
  const w = document.querySelector('#root').scrollWidth;
  const graph = new G6.Graph({
    container: 'root',
    width: w,
    height: h,
    fitView: true,
    animation: true,
    layout: {
      type: 'force',
    },
    defaultNode: {
      shape: 'background-animate',
      size: 10,
      color: '#5B8FF9',
      style: {
        fill: '#000',
        stroke: '#fff'
      },
      labelCfg: {
        position: 'right',
        offset: 5,
        style: {
          fill: '#000',
          stroke: '#fff',
          size: 10
        }
      }
    },
    defaultEdge: {
      style: {
        lineWidth: 1,
        stroke: '#e2e2e2'
      },
      endArrow: {
        path: 'M 4,0 L -4,-4 L -4,4 Z',
        d: 4
      }
    },
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'activate-relations']
    },
    nodeStateStyles: {
      active: {
        opacity: 0.1,
        fill: 'red'
      },
      inactive: {
        opacity: 1
      }
    },
    edgeStateStyles: {
      active: {
        stroke: '#999'
      }
    }
  });
  fetch('./data.json').then(res => res.json()).then(data => {
    data = data.map(i => ({
      ...i,
      id: i.id.toString()
    }))
    const edges = data.reduce((a, c) => {
      if (c.targets) {
        return [...a, ...c.targets.map(i => ({ source: c.id, target: i.toString()}))]
      } else return a
    }, []);
    graph.data({ nodes: data, edges: edges })
    graph.render();


    // graph.on('node:dragstart', function(e) {
    //   graph.layout();
    //   refreshDragedNodePosition(e);
    // });
    // graph.on('node:drag', function(e) {
    //   refreshDragedNodePosition(e);
    // });
    // graph.on('node:dragend', function(e) {
    //   e.item.get('model').fx = null;
    //   e.item.get('model').fy = null;
    // });
  });
})();


function refreshDragedNodePosition(e) {
  const model = e.item.get('model');
  model.fx = e.x;
  model.fy = e.y;
}